<script lang='ts'>
import { computed, defineComponent, onMounted, PropType, reactive, ref } from 'vue'
import { SearchFormColumn } from './interface'
export default defineComponent({
    name: 'JxtechSearchForm'
})
</script>
<script lang='ts' setup>
const props = defineProps({
    // 提示消息
    labelTips: {
        type: [String, Number],
    },
    tipsIcon: {
        type: String,
        default: '#icon-tixing'
    },
    colSpan: {
        //24/colSpan 得出一行有几列搜索条件 默认一行2个
        type: Number,
        default: 12,
    },
    //这个对象是用来接收表单的值的
    queryForm: {
        type: Object,
        default: () => {
            return {}
        }
    },
    //搜索的data 可支持 input select date //todo根据需要进行持续增加 [{name,type,label}]
    queryColumn: {
        type: Array as PropType<SearchFormColumn[]>,
        default: () => { return [] }
    },
})

const emit = defineEmits<{
    (e: 'handle-search', queryForm: any): void//搜索事件
}>()

//是否默认展开
const isOpen = ref(false)
//配置一行几列
const colNumber = computed(() => 24 / props.colSpan)
//单行表单 每个表单单元的span数
const colSpanPre = computed(() => 24 / colNumber.value)
//配置行数
const rowsNumber = computed(() => Math.ceil(props.queryColumn.length / colNumber.value))
//计算是否只有一行
const rowOnlyOperateBtn = computed(() => props.queryColumn.length % colNumber.value == 0 && isOpen.value)
/**
 * 搜索
 */
const handleSearch = () => {
    emit("handle-search", props.queryForm)
}
const labelState = reactive({
    // 消息提示功能施工中
    tipsContent: "这是一个消息提示"
})
/**
 * 重置
 */
const handleReset = () => {
    props.queryColumn.forEach(item => props.queryForm[item.name] = null)
    handleSearch()
}

</script>
<template>
    <div class="jxtech-search-form-wrapper" v-if="rowsNumber > 1">
        <el-form ref="searchFormRef" :model="queryForm" @submit.native.prevent>
            <el-row :gutter="16">
                <el-col :span="16">
                    <el-row :gutter="16">
                        <template v-for="(item,index) in queryColumn" :key="index">
                            <el-col :span="colSpan" v-show="index < colNumber || isOpen">
                                <el-form-item :label="item.label">
                                    <!-- input 输入框 -->
                                    <template v-if="item.type == 'input'">
                                        <el-input
                                            :placeholder="item.placeholder"
                                            v-model="queryForm[item.name]"
                                            @keyup.enter="handleSearch"
                                        ></el-input>
                                    </template>
                                    <template v-if="item.type == 'dictionarySelect'">
                                        <jxtech-dictionary-select
                                            :placeholder="item.placeholder"
                                            v-model="queryForm[item.name]"
                                            :code-item-id="item.codeItemId"
                                            @keyup.enter="handleSearch"
                                        ></jxtech-dictionary-select>
                                    </template>
                                    <!-- 如果类型为custom 则需要使用自定义dom -->
                                    <template v-else-if="item.type == 'custom'">
                                        <!--  必须要有slot   -->
                                        <template v-if="item.slot">
                                            <slot :name="item.slot"></slot>
                                        </template>
                                    </template>
                                </el-form-item>
                            </el-col>
                        </template>
                    </el-row>
                </el-col>
                <el-col :span="8" :offset="rowOnlyOperateBtn ? 24 - colSpan : 0">
                    <!-- <el-col :span="colSpan" > -->
                    <!-- <el-col :span="colSpan"> -->
                    <el-form-item class="jxtech-search-form-btn" style="float: right;">
                        <!-- 当总列数大于 每行列数-1（才显示这个按钮） -->
                        <span
                            v-if="queryColumn.length > colNumber"
                            class="jxtech-search-isopen"
                            @click="isOpen = !isOpen"
                            style="height: 100%;"
                        >
                            {{ isOpen ? '收起' : '更多' }}
                            &nbsp;
                            <span
                                class="jxtech-search-isopen-icon"
                                :class="isOpen ? 'isopen-icon' : ''"
                            ></span>
                        </span>
                        <jxtech-search-button @click="handleSearch"></jxtech-search-button>
                        <jxtech-reset-button @click="handleReset"></jxtech-reset-button>
                    </el-form-item>
                    <!-- </el-col> -->
                </el-col>
            </el-row>
        </el-form>
    </div>
    <div class="jxtech-search-form-wrapper" v-else>
        <el-form ref="searchFormRef" :model="queryForm" @submit.native.prevent>
            <el-row :gutter="24">
                <template v-for="(item,index) in queryColumn" :key="index">
                    <el-col :span="colSpanPre" v-show="index < colNumber || isOpen">
                        <el-form-item>
                            <template #label>{{ item.label }}&nbsp;</template>
                            <!-- input 输入框 -->
                            <template v-if="item.type == 'input'">
                                <el-input
                                    :placeholder="item.placeholder"
                                    v-model="queryForm[item.name]"
                                    @keyup.enter="handleSearch"
                                ></el-input>
                            </template>
                            <template v-if="item.type == 'dictionarySelect'">
                                <jxtech-dictionary-select
                                    :placeholder="item.placeholder"
                                    v-model="queryForm[item.name]"
                                    :code-item-id="item.codeItemId"
                                    @keyup.enter="handleSearch"
                                ></jxtech-dictionary-select>
                            </template>
                            <!-- 如果类型为custom 则需要使用自定义dom -->
                            <template v-else-if="item.type == 'custom'">
                                <!--  必须要有slot   -->
                                <template v-if="item.slot">
                                    <slot :name="item.slot"></slot>
                                </template>
                            </template>
                        </el-form-item>
                    </el-col>
                </template>
                <el-col :span="colSpanPre" :offset="rowOnlyOperateBtn ? 24 - colSpan : 0">
                    <!-- <el-col :span="colSpan" > -->
                    <!-- <el-col :span="colSpan"> -->
                    <el-form-item class="jxtech-search-form-btn" style="float: left;">
                        <!-- 当总列数大于 每行列数-1（才显示这个按钮） -->
                        <span
                            v-if="queryColumn.length > colNumber"
                            class="jxtech-search-isopen"
                            @click="isOpen = !isOpen"
                            style="height: 100%;"
                        >
                            {{ isOpen ? '收起' : '更多' }}
                            &nbsp;
                            <span
                                class="jxtech-search-isopen-icon"
                                :class="isOpen ? 'isopen-icon' : ''"
                            ></span>
                        </span>
                        <jxtech-search-button @click="handleSearch"></jxtech-search-button>
                        <jxtech-reset-button @click="handleReset"></jxtech-reset-button>
                    </el-form-item>
                    <!-- </el-col> -->
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<style scoped lang="scss">
.jxtech-label-tips {
    cursor: pointer;
}
::v-deep(.el-form-item__label) {
    display: flex;
    align-items: center;
    .el-icon {
        font-size: 20px;
    }
}

.jxtech-search-form-wrapper {
    background-color: #fff;
    width: 100%;
}
.jxtech-search-form-btn {
    // width: 100%;
    ::v-deep(.el-form-item__content) {
        display: flex;
        align-items: center;
    }
}

.jxtech-search-isopen {
    display: flex;
    align-items: center;
    justify-content: end;
    // width: 150px;
    margin-right: 20px;
    cursor: pointer;
    user-select: none;
}
.jxtech-search-isopen-icon {
    position: relative;

    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-image: linear-gradient(180deg, #0964b3 30%, #68bdec 70%);
    &:before {
        content: "";
        position: absolute;
        top: 7px;
        left: 4px;
        width: 0;
        height: 0;
        border-color: rgba(255, 255, 255, 0.9) transparent transparent
            transparent;
        border-width: 8px 6px;
        border-style: solid;
        transition: all 0.2s;
    }
}
.isopen-icon {
    &:before {
        top: -3px;
        transform: rotateX(180deg);
    }
}
</style>